<template>
    <transition name="rightBox">
        <div class="dialog_box " v-if="isDialog">
            <div class="dialog_mask" @click="maskHide" ></div>
            
            <div :style="styleObj" class="dialog_content">
                <header>
                    <span>{{title}}</span>
                    <i class="el-icon-close" @click="maskHide"></i>
                </header>
                <div class="section">
                    <slot></slot>
                </div>
                <footer>
                    <el-button>关闭</el-button>
                    <el-button type="primary">确定</el-button>
                </footer>
            </div>
           
        </div>
     </transition>
</template>
<script type='es6'>
export default {
  props: {
    isDialog:{
        type:Boolean,
        default:true
    },
    title: {
      type: String,
      default: "消息"
    },
    styleObj:{
        type:Object,
        default:function(){
            return {               
                width: '500px',
                height:'100%',              
            }
        }
    }
  },
  methods:{
      maskHide(){
         this.$emit('on-close',false)
      }

  }
};
</script>
<style lang="less" scoped>
.rightBox-enter-active {
  animation: bounce-in ease;
}
.rightBox-leave-active {
  animation: bounce-out ease;
}
@keyframes bounce-in {
  0% {
    transform: translate(100%,0);
            
  }
  
  100% {
    transform: translate(0, 0);
            
  }
}
 @keyframes bounce-out {
        0% {
            transform: translate(0, 0);
           
        }
        100% {
            transform: translate(100%, 0);
            
        }
 }
.dialog_box{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    .dialog_content{
        position: fixed;              
        top: 0;
        right: 0;
        background: #ffffff;
        z-index: 5000;
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
        header{
            padding: 10px 15px;
            font-size: 16px;
            position: relative;
            i{
                position: absolute;
                top: 12px;
                right: 15px;
                cursor: pointer;
            }
            i:hover{
                color:#409EFF;
            }
        }
        .section{
            width: 90%;
            // height: 100px;
            margin: 20px auto;
            
        }
        footer{
            text-align: center;
            padding: 20px 0;
        }
    }
    .dialog_mask{
        position: fixed;
        z-index: 4000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .6);
    }
}

</style>
